<template>
  <div class="sidebar-container">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        class="el-menu-vertical-demo"
        :default-active="activeMenu"
        background-color="#fff"
        text-color="#333"
        :unique-opened="true"
        active-text-color="#007feb"
        :collapse-transition="false"
        mode="vertical"
        router
      >
        <sidebar-item
          v-for="route in sideList"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import SidebarItem from "./SidebarItem.vue";
import { computed, toRefs, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  name: "sideBar",
  props: {
    sideList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: { SidebarItem },
  setup(props) {
    const route = useRoute();
    const router = useRouter();

    const activeMenu = computed(() => {
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      if (path == "/admin") {
        const { sideList } = props;
        router.push(sideList ? sideList[0].viewPath : "/");
        return;
      }
      return path;
    });

    return {
      activeMenu,
    };
  },
};
</script>

<style lang="less" scoped>
.sidebar-container {
  width: 100%;
  height: calc(100% - 20px);
  padding: 10px;
  position: relative;
  background: #fff;

  .scrollbar-wrapper {
    overflow-x: hidden !important;
  }
  .el-scrollbar__bar.is-vertical {
    right: 0px;
  }
  .el-scrollbar {
    height: 100%;
  }
  .el-scrollbar__view {
    height: 100%;
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: #ecf5ff !important;
    border-radius: 0 30px 30px 0;
  }
}
</style>
<style lang="less">
.sidebar-container {
  .el-menu {
    border-right: none;
  }
  .el-menu-item {
    height: 50px;
    margin: 5px 0;
    border-radius: 0 30px 30px 0;
    i {
      font-size: 20px;
    }
    &.is-active {
      background-color: #ecf5ff !important;
      border-left: 3px solid rgb(0, 127, 235);
      border-radius: 0 30px 30px 0;
    }
  }
  .el-menu-item,
  .el-submenu__title {
    line-height: 50px;
  }
}
</style>
